<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
        <div th:include="common :: css"></div>
        <style>
            .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
                height: 34px;
                line-height: 34px;
                padding: 0 8px;
            }
        </style>
    </head>
    <body>
        <div class="layuimini-container">
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="save"> 保存 </button>
                </div>
            </script>
            <div class="layuimini-main">
                <div>
                    <table id="currentTableId" class="layui-table" lay-filter="currentTableFilter"></table>
                </div>
            </div>
        </div>

        <div th:include="common :: js"></div>
        <script>
            layui.use(['table', 'treetable'], function () {
                var $ = layui.jquery;
                var table = layui.table;

                var cols = [
                    {type: "checkbox", width: 50},
                    {field: 'title', width: 100, title: '菜单名称'},
                    {field: 'href', title: '菜单href'},
                    {
                        field: 'pid', width: 80, align: 'center', templet: function (d) {
                            if (d.pid == 0) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            }else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    }
                ];

                table.render({
                    elem: '#currentTableId',//指定table的id
                    url: '/systemMenu/getAuths',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    cols: [cols],
                    limits: [10, 15, 20, 25, 50, 100],
                    limit: 15,
                    page: true,
                    skin: 'line',
                    done: function(res, page, count){
                        //可以自行添加判断的条件是否选中
                        //这句才是真正选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中
                        // res.data[0]["LAY_CHECKED"]='true';
                        //下面三句是通过更改css来实现选中的效果
                        for (var i = 0; i < res.data.length; i++) {
                            var item = res.data[i];
                            var menus = '[[${role.menus}]]';
                            var index= item['LAY_TABLE_INDEX'];
                            $('tr[data-index=' + index + '] input[type="checkbox"]').val(item.id);
                            if (menus.indexOf(item.id) != -1) {
                                $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            }
                        }
                    }
                });

                table.on('toolbar(currentTableFilter)', function (obj) {
                    if (obj.event === 'save') {  // 监听添加操作
                        var checkStatus = table.checkStatus('currentTableId');
                        var data = checkStatus.data;

                        var ids = "";
                        // for(var i = 0; i < data.length; i++) {
                        //     ids += data[i].id;
                        //     if (i != data.length - 1) {
                        //         ids += ","
                        //     }
                        // }

                        var count = $('input:checkbox:checked').length;
                        $('input:checkbox:checked').each(function (index, item) {
                            var val = $(this).val();
                            if (val != 'on') {
                                ids += val;
                                if (index != count - 1) {
                                    ids += ","
                                }
                            }
                        });
                        console.log(ids);
                        layer.confirm("是否保存", {icon: 3, title:"提示"}, function(index){
                            $.post("/role/save", {
                                id: [[${role.id}]],
                                menus: ids
                            }, function (result) {
                                layer.close(index);


                                // 关闭弹出层
                                layer.close();

                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        });
                        return false;
                    }
                });

                //监听工具条
                table.on('tool(currentTableId)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;

                    if (layEvent === 'del') {
                        layer.msg('删除' + data.id);
                    } else if (layEvent === 'edit') {
                        layer.msg('修改' + data.id);
                    }
                });
            });
        </script>
    </body>
</html>